<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <!--      <view class="title">活动详情</view>-->
      <view class="right-icons">
        <text class="iconfont icon-more" @click="showMore"></text>
        <text class="iconfont icon-share" @click="share"></text>
      </view>
    </view>

    <!-- 活动名称 -->
    <view class="activity-name">
      <text class="iconfont icon-tag"></text>
      <text>2012届毕业生母校游</text>
      <text class="iconfont icon-share-right" @click="shareActivity"></text>
    </view>

    <!-- 活动基本信息 -->
    <view class="basic-info">
      <view class="info-item">
        <text class="label">招生年度</text>
        <text class="value">2023年</text>
      </view>
      <view class="info-item">
        <text class="label">活动来源</text>
        <text class="value">派发</text>
      </view>
      <view class="info-item">
        <text class="label">活动区域</text>
        <text class="value">湖北省/武汉市/洪山区</text>
      </view>
    </view>

    <!-- 活动牵头负责组 -->
    <view class="lead-group">
      <view class="group-header">
        <text class="iconfont icon-group"></text>
        <text>活动牵头负责组</text>
      </view>
      <view class="group-info">
        <image src="/static/group-avatar.png" class="group-avatar" />
        <view class="group-text">
          <text class="group-name">招生宣传组</text>
          <text class="group-desc">招办对接人</text>
        </view>
      </view>
    </view>

    <!-- 活动创建人 -->
    <view class="creator">
      <view class="creator-header">
        <text class="iconfont icon-user"></text>
        <text>活动创建人</text>
      </view>
      <view class="creator-info">
        <image src="/static/creator-avatar.png" class="creator-avatar" />
        <text class="creator-name">李明慧</text>
      </view>
    </view>

    <!-- 活动时间 -->
    <view class="activity-time">
      <view class="time-header">
        <text class="iconfont icon-time"></text>
        <text>活动时间</text>
      </view>
      <view class="time-info">
        <text>计划开始日期：2023/03/29</text>
        <text>计划结束日期：2023/03/29</text>
        <text>合计时长：1天</text>
      </view>
    </view>

    <!-- 活动成员 -->
    <view class="activity-members">
      <view class="members-header">
        <text>活动成员</text>
        <text class="toggle" @click="toggleMembers">{{ membersToggle ? '收起' : '展开' }}</text>
      </view>
      <view class="members-list" v-show="membersToggle">
        <view class="member-item" v-for="(member, index) in members" :key="index">
          <text class="member-id">{{ member.id }}</text>
          <text class="member-name">{{ member.name }}</text>
          <text class="member-unit">在校单位：{{ member.unit }}</text>
          <text class="member-position">职务：{{ member.position }}</text>
          <text class="member-title">职称：{{ member.title }}</text>
          <text class="member-origin">籍贯：{{ member.origin }}</text>
          <text class="member-school">毕业中学：{{ member.school }}</text>
          <text class="member-phone">联系电话：{{ member.phone }}</text>
        </view>
      </view>
    </view>

    <!-- 活动信息 -->
    <view class="activity-info">
      <view class="info-header">
        <text class="iconfont icon-info"></text>
        <text>活动信息</text>
      </view>
      <view class="info-content">
        <text>宣传到访单位名称：A单位</text>
        <text>宣传到访时间：2023/03/29</text>
        <text>宣传到访单位联系人：周彬</text>
        <text>宣传到访单位联系人职务：教导主任</text>
      </view>
    </view>

    <!-- 活动总结 -->
    <view class="activity-summary">
      <view class="summary-header">
        <text class="iconfont icon-summary"></text>
        <text>活动总结</text>
        <text class="add-btn" @click="addSummary">添加</text>
      </view>
      <view class="summary-content">
        <text class="summary-time">2023/3/20 00:00:00</text>
        <text class="summary-text">
          学校坚持认真贯彻执行全国、省、市关于职业学校招生工作精神，加强招生管理，规范招生行为。
        </text>
        <view class="summary-creator">
          <image src="/static/creator-avatar.png" class="summary-avatar" />
          <text class="summary-name">李明慧</text>
          <text class="summary-desc">记录人</text>
          <text class="summary-latest">展示最新的一条</text>
        </view>
      </view>
    </view>

    <!-- 活动视频 -->
    <view class="activity-video">
      <view class="video-header">
        <text class="iconfont icon-video"></text>
        <text>活动视频</text>
        <text class="add-btn" @click="addVideo">添加</text>
      </view>
      <view class="video-content">
        <image src="/static/video-cover.png" class="video-cover" />
        <text class="video-time">2023/3/20 00:00:00</text>
        <view class="video-creator">
          <image src="/static/creator-avatar.png" class="video-avatar" />
          <text class="video-name">李明慧</text>
          <text class="video-desc">记录人</text>
          <text class="video-latest">展示最新的一条</text>
        </view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tip">
      PC端能够查看更多详细内容，并提供数据下载
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      membersToggle: true, // 活动成员列表是否展开
      members: [
        {
          id: "10003",
          name: "姓名1",
          unit: "A学院",
          position: "主任",
          title: "教授",
          origin: "湖北省",
          school: "武汉一中",
          phone: "15888888888",
        },
        {
          id: "10003",
          name: "姓名1",
          unit: "A学院",
          position: "主任",
          title: "教授",
          origin: "湖北省",
          school: "武汉一中",
          phone: "15888888888",
        },
      ],
    };
  },
  methods: {
    // 返回
    goBack() {
      uni.navigateBack();
    },
    // 显示更多操作
    showMore() {
      uni.showToast({
        title: "显示更多",
        icon: "none",
      });
    },
    // 分享
    share() {
      uni.showToast({
        title: "分享",
        icon: "none",
      });
    },
    // 分享活动
    shareActivity() {
      uni.showToast({
        title: "分享活动",
        icon: "none",
      });
    },
    // 切换活动成员列表展开/收起
    toggleMembers() {
      this.membersToggle = !this.membersToggle;
    },
    // 添加活动总结
    addSummary() {
      uni.showToast({
        title: "添加活动总结",
        icon: "none",
      });
    },
    // 添加活动视频
    addVideo() {
      uni.showToast({
        title: "添加活动视频",
        icon: "none",
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 0 20rpx;
  background-color: #F1F5FF;
  min-height: 100vh;
}
/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8rpx;
  border-bottom: 1rpx solid #eee;
}
.back {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
.right-icons {
  display: flex;
  align-items: center;
}
.iconfont {
  font-size: 32rpx;
  margin-left: 30rpx;
}

/* 活动名称 */
.activity-name {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.activity-name .icon-tag {
  color: #007aff;
  margin-right: 10rpx;
}
.activity-name .icon-share-right {
  margin-left: auto;
}

/* 基本信息 */
.basic-info {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.info-item {
  display: flex;
  margin-bottom: 15rpx;
}
.info-item:last-child {
  margin-bottom: 0;
}
.label {
  width: 150rpx;
  color: #666;
}
.value {
  flex: 1;
}

/* 活动牵头负责组 */
.lead-group {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.group-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.group-header .icon-group {
  color: #007aff;
  margin-right: 10rpx;
}
.group-info {
  display: flex;
  align-items: center;
}
.group-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.group-name {
  font-weight: bold;
  margin-right: 10rpx;
}

/* 活动创建人 */
.creator {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.creator-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.creator-header .icon-user {
  color: #007aff;
  margin-right: 10rpx;
}
.creator-info {
  display: flex;
  align-items: center;
}
.creator-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

/* 活动时间 */
.activity-time {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.time-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.time-header .icon-time {
  color: #007aff;
  margin-right: 10rpx;
}
.time-info text {
  display: block;
  margin-bottom: 10rpx;
}
.time-info text:last-child {
  margin-bottom: 0;
}

/* 活动成员 */
.activity-members {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}
.toggle {
  color: #007aff;
}
.member-item {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 15rpx;
  margin-bottom: 15rpx;
}
.member-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.member-id {
  display: block;
  text-align: right;
  margin-bottom: 10rpx;
}
.member-name,
.member-unit,
.member-position,
.member-title,
.member-origin,
.member-school,
.member-phone {
  display: block;
  margin-bottom: 5rpx;
}

/* 活动信息 */
.activity-info {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.info-header .icon-info {
  color: #007aff;
  margin-right: 10rpx;
}
.info-content text {
  display: block;
  margin-bottom: 10rpx;
}
.info-content text:last-child {
  margin-bottom: 0;
}

/* 活动总结 */
.activity-summary {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}
.summary-header .icon-summary {
  color: #007aff;
  margin-right: 10rpx;
}
.add-btn {
  color: #007aff;
  font-size: 28rpx;
}
.summary-content {
  border-top: 1rpx solid #eee;
  padding-top: 15rpx;
}
.summary-time {
  display: block;
  color: #999;
  margin-bottom: 10rpx;
}
.summary-text {
  display: block;
  line-height: 1.5;
  margin-bottom: 15rpx;
}
.summary-creator {
  display: flex;
  align-items: center;
}
.summary-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.summary-name {
  margin-right: 10rpx;
}
.summary-desc {
  color: #999;
  margin-right: 10rpx;
}
.summary-latest {
  color: #999;
  font-size: 26rpx;
}
/* 活动视频 */
.activity-video {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}
.video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}
.video-header .icon-video {
  color: #007aff;
  margin-right: 10rpx;
}
.video-content {
  border-top: 1rpx solid #eee;
  padding-top: 15rpx;
}
.video-cover-container {
  position: relative;
  width: 100%;
  height: 300rpx;
  margin-bottom: 15rpx;
}
.video-cover {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}
.video-time {
  display: block;
  color: #999;
  margin-bottom: 10rpx;
}
.video-creator {
  display: flex;
  align-items: center;
}
.video-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.video-name {
  margin-right: 10rpx;
}
.video-desc {
  color: #999;
  margin-right: 10rpx;
}
.video-latest {
  color: #999;
  font-size: 26rpx;
}

/* 底部提示 */
.bottom-tip {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  padding: 20rpx 0 40rpx 0;
}
</style>